<template>
  <div>
    <section class="container">
      <div class="quill-editor"
           :content="content"
           @change="onEditorChange($event)"
           @blur="onEditorBlur($event)"
           @focus="onEditorFocus($event)"
           @ready="onEditorReady($event)"
           v-quill:myQuillEditor="editorOption">
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: "editor",
    props:{
      content:{
        type:String,
        default:'在这里写正文'
      }
    },
    data() {
      return {

        editorOption: {
          // some quill options
          // modules: {
          //   toolbar: [
          //     ['bold', 'italic', 'underline', 'strike'],
          //     ['blockquote', 'code-block']
          //   ]
          // }
        }
      }
    },
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange({editor, html, text}) {
        console.log('editor change!', editor, html, text)
        this.content = html
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    .quill-editor {
      min-height: 300px;
      overflow-y: auto;
    }
  }
</style>
